<template>
  <div>
    <van-nav-bar title="城市列表" left-arrow @click-left="$router.go(-1)" />

    <van-index-bar :index-list="cityArr">
      <!-- 有一个东西只起包裹作用，最终渲染出来就没了 template  -->
      <template v-for="(item, index) in cityObj">
        <van-index-anchor :index="index" :key="index">{{
          index
        }}</van-index-anchor>
        <div :key="index + 'abwefwefw'">
          <van-cell
            :title="item1.label"
            v-for="(item1, index1) in item"
            :key="index1"
          />
        </div>
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import { getCitys, getHotCitys } from '@/api/city'
export default {
  name: 'city-page',
  data() {
    return {
      cityObj: {},
      cityArr: []
    }
  },
  methods: {},
  async created() {
    const obj = {}
    // 真实的需求就应该像我这样写，因为这样写没有bug
    const currentCity = JSON.parse(window.localStorage.getItem('current')) || {
      label: '北京',
      value: 'AREA|88cff55c-aaa4-e2e0',
      pinyin: 'beijing',
      short: 'bj'
    }
    obj['#'] = [currentCity]
    const res1 = await getCitys({ level: 1 })
    const res2 = await getHotCitys()
    console.log(res1)
    console.log(res2)
    obj['热'] = res2.body

    // Object.keys 作用是把某对象所有的key全部提取出来组成一个新的数组
    const cityArr = Object.keys(obj)
    const cityArr1 = cityArr.slice(2)
    cityArr1.sort()

    console.log(cityArr1)

    const obj1 = {}
    cityArr1.forEach((item) => {
      console.log(item)
      obj1[item] = []
    })
    console.log(obj1)
    // res1.body.forEach((item) => {
    //   const key = item.short[0].toUpperCase()

    // })

    cityArr1.unshift('#', '热')
    this.cityArr = cityArr1
    this.cityObj = obj
  }
}
</script>

<style scoped lang="less"></style>
